<template>
	<text class="iconfont" :class="prefix + name" :style="innerStyle" @click="handleClick"></text>
</template>

<script>
	/**
	 * 字体图标组件
	 * <br> 可以基于自己的iconfont文件，扩展图标
	 */
	export default {
		name: "com-icon",
		props: {
			//图标名称
			name: { type: String, default: "" }, 
			//图标大小	
			size: { type: String, default: "40" },
			//图标颜色
			color: { type: String, default: "" },
			//图标名称统一前缀
			prefix: { type: String, default: "icon-" },
			//背景颜色
			bgcolor: { type: String, default: "" },
			//边框颜色
			borderColor: { type: String, default: "transparent" }, 
			//边框宽度
			borderWidth: { type: [String,Number], default: "2" },
			//边框样式
			borderStyle: { type: String, default: "solid" },
			//宽度
			width: { type: [String,Number], default: "" },
			//高度
			height: { type: [String,Number], default: "" },
			//是否为圆圈
			circle: { type: Boolean, default: false },
			//圆角半径
			borderRadis: { type: [String,Number], default: "10" },
			//2D旋转角度
			rotate: { type: [String,Number], default: "0" },
			//3D旋转角度 示例：[0,180,0]
			rotate3D: { type: [Array], default: ()=>[0,0,0] },
			//自定义样式
			customStyle: { type: Object, default(){ return {} }} ,
		},
		data() {
			return {};
		},
		computed: {
			innerStyle(){
				let [rotateX, rotateY, rotateZ]  = this.rotate3D 
				return {
					color: this.color,
					'font-size': this.size + 'rpx',
					'width': this.width + 'rpx',
					'height': this.height + 'rpx',
					'line-height': this.height + 'rpx',
					'background-color': this.bgcolor,
					'border-radius': this.circle ? '50%' : this.borderRadis + 'rpx',
					'border-color': this.borderColor,
					'border-width': this.borderWidth + 'rpx',
					'border-style': this.borderStyle,
					'transform': `rotate(${this.rotate}deg) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`,
					...this.customStyle
				}
			}
		},
		
		methods: {
			handleClick(){
				// 点击
				this.$emit('click')
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/style/iconfont.css";
	.iconfont{
		display: inline-block;
		text-align: center;
		vertical-align: middle;
	}
</style>